﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPage1.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	List of the Stations
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

           <div class="row">
          <div class="span10">
            <br />
            <br />

    <div id='mapDiv' style="position:relative; width:580px; height:600px; vertical-align:middle;"></div>
          </div>
          <div class="span4">
            <br />
            <br />
            <h3>Choose a line</h3>         
        
            <br />
            <br />         
          
            <input id="Button1" type="button" class="btn primary" value="Show Stations" onclick="btnClick();" />

            <br />
            <br />
             
            <%=Html.DropDownList("lines", (SelectList)ViewData["lines"] ) %>     
            
            <br />
            <br />
            <br />
            
            <div id="StationsDiv"></div>        
          
          </div>
        </div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">

    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
   </script>
  
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  
   <script type="text/javascript">
       var map;
       function GetMap() {
           map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
           { credentials: "AuaJAvEEwsrj2AzmWeJY66PUmNuOx4PGEDRpPQq803auEsfkd9NlV6HhTEzZM95F",
               center: new Microsoft.Maps.Location(47.49, 19.04),
               zoom: 13
           });

       }
    </script>

    <script type="text/javascript">

        $(document).ready(function () {
            GetMap();
        });
        
        function btnClick() {

            var str = $('#lines').val()
            var strArr = str.split(' ');
            var lineNumber = strArr[0];
            var vTypes = strArr[1];

            $.ajax({
                type: "POST",
                url: '../../InfoService.svc/InfoService/ListStations',
                contentType: "application/json",
                data: JSON.stringify({ vNumber: lineNumber, vType: vTypes }),
                success: function (data) {
                    map.entities.clear();
                    $('#StationsDiv').empty();
                    for (var j = 0; j < data.d.length; j++) {
                        var loc = new Microsoft.Maps.Location(data.d[j].Latitude, data.d[j].Longiture);
                        var pin = new Microsoft.Maps.Pushpin(loc);
                        map.entities.push(pin);

                        $('#StationsDiv').append('<p>' + data.d[j].Snumber + ' ' + data.d[j].StationName + '</p>');
                        //  $('.pp' + data.d[j].Snumber).children().attr('title', 'This is pin 1.');
                    }
                }
            });
        }    
    </script>
</asp:Content>
